<template>
	<div class="Flow-components">
		<div v-if="data.questionAnswerContent && explain">
			<p class="question-title">
				当前题型为系列题，回答正确则进入下一题, 回答错误则结束答题并计分
			</p>
			<div
				v-for="(question, index) in data.questionAnswerContent.questionList"
				:key="index"
				v-show="activeIdx === index"
			>
				<van-radio-group v-model="answer[index]">
					<p class="question-title">{{ question.question }}</p>
					<van-radio
						:name="idx"
						v-for="(item, idx) in question.choiceAndAnswerList"
						:key="idx"
						disabled
						:class="[question.score ? 'right-one' : 'error-one']"
						@click="selectOne"
						>{{ item.choice }}</van-radio
					>
				</van-radio-group>
				<p class="ques-title" style="font-weight: bold" v-show="!question.score">
					正确答案：
					<span style="color: #56baca">{{ question.answer | numFilter }}</span>
				</p>
			</div>
			<btn
				@click="next"
				class="btn-next"
				v-show="activeIdx !== data.questionAnswerContent.questionList.length - 1"
				>下一问</btn
			>
		</div>

		<div v-if="data.content && !explain">
			<p class="question-title">
				当前题型为系列题，回答正确则进入下一题, 回答错误则结束答题并计分
			</p>
			<div
				v-for="(question, index) in data.content.questionList"
				:key="index"
				v-show="activeIdx === index"
			>
				<van-radio-group v-model="answer[index]">
					<p class="question-title">{{ question.question }}</p>
					<van-radio
						:name="idx"
						v-for="(item, idx) in question.choiceAndAnswerList"
						:key="idx"
						:disabled="disabled"
						@click="selectOne"
						>{{ item.choice }}</van-radio
					>
				</van-radio-group>
			</div>
			<btn
				@click="submit"
				class="btn-next"
				v-show="activeIdx !== data.content.questionList.length - 1"
				>下一问</btn
			>
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: "Flow",
	props: {
		data: {
			type: Object,
			default: {},
		},
		explain: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			answer: [],
			activeIdx: 0,
			score: 0,
			disabled: false,
		};
	},
	watch: {
		data: {
			handler(newV, oldV) {
				this.initState();
			},
			deep: true,
		},
	},
	mounted() {
		this.initState();
	},

	methods: {
		initState() {
			if (this.explain) {
				if (this.data.questionAnswerContent) {
					this.answer = this.data.questionAnswerContent.studentAnswer;
				} else {
					this.filterRight();
					this.answer = [];
				}
			} else {
				this.answer = this.data.answer || [];
				if (this.data.questionAnswerContent) {
					this.disabled = true;
				} else {
					this.disabled = false;
				}
			}
		},
		filterRight() {
			this.data.questionAnswerContent = JSON.parse(JSON.stringify(this.data.questionContent));
			this.data.questionAnswerContent.questionList.forEach((question, index) => {
				question.choiceAndAnswerList.forEach((element, i) => {
					if (element.answer) {
						question.answer = i;
					}
				});
			});
			this.data.questionAnswerContent.studentAnswer = [];
		},
		next() {
			if (this.activeIdx < this.data.questionAnswerContent.questionList.length - 1) {
				this.activeIdx += 1;
			} else {
				this.$emit("nextQues");
			}
		},
		submit() {
			var index = this.answer[this.activeIdx];
			if (this.answer[this.activeIdx] === undefined) {
				this.$toast.fail("未选择答案");
				return;
			}
			if (this.data.content.answerNext) {
				this.activeIdx += 1;
			} else {
				if (
					this.data.content.questionList[this.activeIdx].choiceAndAnswerList[index].answer
				) {
					this.activeIdx += 1;
				} else {
					this.$emit("nextQues");
				}
			}
		},
		selectOne() {
			if (this.disabled && !this.data.content.answerNext) {
				this.$toast.fail("系列题无法重新选择");
			}
		},
		computeScore() {
			var content = JSON.parse(JSON.stringify(this.data.content));
			var score = 0;
			content.questionList.forEach((question, index) => {
				if (index > this.activeIdx || this.answer.length === 0) {
					return;
				}
				if (this.answer[index] != undefined) {
					let idx = this.answer[index];
					question.score = question.choiceAndAnswerList[idx].answer
						? this.data.questionScore
						: 0;
					score = question.choiceAndAnswerList[idx].answer
						? score + this.data.questionScore
						: score;
					question.answer = idx;
					//question.choiceAndAnswerList[idx].answer = true;
				} else {
					question.score = 0;
					question.answer = "";
				}
			});
			content.studentAnswer = this.answer;
			content.finish = true;
			return { content, score };
		},
		changeValue(key) {
			if (this.answer[this.activeIdx] === undefined) {
				this.$toast.fail("未选择答案");
				return true;
			}
			var { content, score } = this.computeScore();
			this.$emit("changeValue", this.answer, content, score);
		},
	},
};
</script>

<style lang="scss">
.Flow-components {
	.btn-next {
		width: 50%;
		margin: 30px auto 40px;
	}
}
</style>
